<template>
  <div class="app-container">
    <div style="padding: 10px 0 0 10px;">
      <el-form :inline="true" class="search-form">
        <el-row style="display: flex; flex-wrap: wrap">
          <div style="flex: 1">
            <el-form-item label="名称：">
              <el-input v-model="searchForm.name" :maxlength="20" class="marginBottom" placeholder="请输入商户名称"
                clearable />
            </el-form-item>
            <el-form-item label="手机号：">
              <el-input v-model="searchForm.user_cellphone" onkeyup="value=value.replace(/\D/g,'')" class="marginBottom"
                placeholder="请输入手机号" clearable />
            </el-form-item>
            <el-form-item label="分类：" v-if="searchDisplay">
              <el-select v-model="searchForm.mer_cate_id" placeholder="请选择分类" class="marginBottom">
                <el-option v-for="item in CateList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="认证状态" v-if="searchDisplay">
              <el-select clearable v-model="searchForm.status" placeholder="请选择状态" class="marginBottom">
                <el-option v-for="item in [
                    { name: '生效', id: 1 },
                    { name: '禁用', id: 2 },
                  ]" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="缴纳保证金" v-if="searchDisplay">
              <el-select clearable v-model="searchForm.is_collection" placeholder="请选择缴纳状态" class="marginBottom">
                <el-option v-for="item in [
                    { name: '是', id: 1 },
                    { name: '否', id: 2 },
                  ]" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人：" v-if="searchDisplay">
              <el-input v-model="searchForm.user_name" class="marginBottom" placeholder="请输入负责人" clearable />
            </el-form-item>
            <el-form-item label="区域" v-if="searchDisplay">
              <el-cascader v-model="searchForm.county_id" :options="provinceList" class="marginBottom"
                :props="{ expandTrigger: 'hover',emitPath:false, value: 'id', label: 'name' }" @change="handleChange" clearable />
            </el-form-item>
          </div>
          <div style="margin: 5px 0; text-align: right">
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="getQuery">查询</el-button>
              <el-button size="small" type="primary" icon="el-icon-refresh" @click="resettingWay">重置</el-button>
              <el-button v-if="!searchDisplay" type="warning" icon="el-icon-caret-bottom"
                @click="searchDisplay = true">展开</el-button>
              <el-button v-else type="warning" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="grouping" style="margin-top: 20px">
      <el-row class="marginBottom" :gutter="20" style="display: flex">
        <el-col>
          <el-button v-hasPermi="'tabulation/add'" icon="el-icon-circle-plus-outline" type="primary" size="small"
            @click="addmerchantWay">添加商户</el-button>
        </el-col>
        <el-col :span="8" style="float: right">
          <div class="right-panel el-button-group">
            <el-button class="" icon="el-icon-refresh" size="mini" @click="resettingWay" />
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button class="" icon="el-icon-s-operation" size="mini" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
      <el-col>
        <el-table v-loading="loading" :header-cell-style="{
            'background-color': '#f3f8fe',
            color: '#606266',
            height: '50px',
          }" highlight-current-row :data="merchantList" style="width: 100%">
          <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
            min-width="80" align="center">
            <template slot-scope="scope">
              <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                <div class="one_line_hidden">
                  {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="star_level" label="商户分类">
            <template slot-scope="scope">
              {{ scope.row.merchant_category && scope.row.merchant_category.name }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="type" label="商户类型">
            <template slot-scope="scope">
              {{ scope.row.type==1?'个人':scope.row.type==2?'个体工商户':'企业' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="grade" label="地址">
            <template slot-scope="scope">
              <el-tooltip placement="top-start" :content="scope.row.province_name +
                  scope.row.city_name +
                  scope.row.county_name + ''">
                <div class="one_line_hidden">
                  {{
                   scope.row.province_name +
                     scope.row.city_name +
                     scope.row.county_name
                 }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="source_from" label="商户来源">
            <template slot-scope="scope">
              <span v-if="scope.row.source_from == 1" style="color: #0076f6;font-weight: 550;">自主申请</span>
              <span v-if="scope.row.source_from == 2" style="color: #567722;font-weight: 550;">后台创建</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="is_collection" label="缴纳保证金">
            <template slot-scope="scope">
              <span style="color: #0076f6;" v-if="scope.row.is_collection == 1">已缴纳</span>
              <span v-else style="color: #ff4949;">未缴纳</span>
            </template>
          </el-table-column>
          <el-table-column v-hasPermi="'tabulation/status'" align="center" prop="status" label="状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2"
                @change="switchShowWay(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" width="180" prop="address" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="doInfo(scope.row)">
                详情
              </el-button>
              <el-button v-hasPermi="'tabulation/edit'" type="text" @click="putGrade(scope.row)">
                修改
              </el-button>
              <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delGradeWay(scope.row)">
                <el-button slot="reference" v-hasPermi="'tabulation/del'" type="text" style="margin-left: 10px">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col class="marginTop marginBottom" style="text-align: right">
        <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40]" :page-size="searchForm.page.count"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-col>
    </div>
    <!-- 添加修改商户弹框 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="商户信息" size="75%" :withHeader="false"
      :visible.sync="dialogMerchant" @close="dialogMerchantClose" :show-close="true">
      <div class="drawerTitle">
        <span>{{title}}</span>
        <div class="close" @click="dialogMerchantClose">
          <i class="el-icon-close" style="font-size: 24px;"></i>
        </div>
      </div>
      <div v-loading="addLoading" style="position: relative;padding: 10px 20px;">
        <el-tabs v-model="activeName" @tab-click="handleMerchantClick">
          <el-tab-pane label="基本信息" name="基本信息">
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">关联用户</div>
              </div>
              <div class="right"></div>
            </div>
            <el-row :gutter="20">
              <el-form ref="form" :model="form" :rules="formRules" label-width="110px" class="demo-ruleForm">
                <el-col :span="11">
                  <el-form-item label="关联用户" prop="user_id">
                    <el-select v-model="form.user_id" remote filterable clearable placeholder="请输入用户手机号"
                      @change="userIdWay" :remote-method="remoteMethod">
                      <el-option v-for="item in userList" :key="item.id"
                        :label="item.nickname + '(' + item.mobile + ')'" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="用户ID" prop="user_id">
                    <el-input v-model="form.user_id" disabled placeholder="(选择用户后自动写入)" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="手机号" prop="user_cellphone">
                    <el-input v-model="form.user_cellphone" disabled placeholder="(选择用户后自动写入)" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="用户名字" prop="user_name">
                    <el-input v-model="form.user_name" disabled placeholder="(选择用户后自动写入)" />
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">商户信息</div>
              </div>
              <div class="right"></div>
            </div>
            <el-row :gutter="20">
              <el-form ref="basicForm" :model="basicForm" :rules="basicRules" label-width="110px" class="demo-ruleForm">
                <el-col :span="22">
                  <el-form-item label="商户名称" prop="name">
                    <el-input v-model.trim="basicForm.name" maxlength="20" clearable show-word-limit
                      placeholder="请输入商户名称" />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="11">
                  <el-form-item label="开店时间" prop="start_time">
                    <el-date-picker
                      v-model="basicForm.start_time"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime"
                      clearable
                      placeholder="选择开店时间"
                    />
                  </el-form-item>
                </el-col> -->
                <el-col :span="22">
                  <el-form-item label="商户类型" prop="type">
                    <el-radio-group v-model="form.type" size="mini" @click="formtypeWay">
                      <el-radio :label="1">个人</el-radio>
                      <el-radio :label="2">个体工商户</el-radio>
                      <el-radio :label="3">企业</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="省份" prop="province_id">
                    <el-select v-model="basicForm.province_id" clearable placeholder="请选择省份" @change="province_idWay">
                      <el-option v-for="(item, index) in provinceList" :key="index" :label="item.name"
                        :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="城市" prop="city_id">
                    <el-select v-model="basicForm.city_id" clearable placeholder="请选择城市" @change="city_idWay">
                      <el-option v-for="(item, index) in cityList" :key="index" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="区/县" prop="county_id">
                    <el-select v-model="basicForm.county_id" clearable placeholder="请选择区/县">
                      <el-option v-for="(item, index) in countyList" :key="index" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="联系人" prop="user_name">
                    <el-input v-model.trim="basicForm.user_name" maxlength="10" show-word-limit clearable
                      placeholder="请输入联系人" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="联系人手机号" prop="user_cellphone">
                    <el-input v-model.trim="basicForm.user_cellphone" clearable maxlength="11" show-word-limit
                      placeholder="请输入联系人手机号" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="店铺类目" prop="mer_cate_id">
                    <el-select v-model="basicForm.mer_cate_id" clearable placeholder="请选择店铺类目">
                      <el-option v-for="(item, index) in CateList" :key="index" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="店铺经营类目" prop="operate_category">
                    <el-select v-model="basicForm.operate_category" clearable placeholder="请选择店铺类目">
                      <el-option v-for="(item, index) in CateList" :key="index" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="介绍" prop="description">
                    <el-input v-model="basicForm.description" type="textarea" maxlength="200" show-word-limit
                      placeholder="请输入商户介绍" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="logo" prop="logo">
                    <logo-upload :single-file="logoFile" :show-file-list="false" accept="image/jpeg, image/png"
                      @uploadCallback="logoCallback" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="背景图" prop="background_image">
                    <logo-upload :single-file="background_imageFile" :show-file-list="false"
                      accept="image/jpeg, image/png" @uploadCallback="background_imageCallback" />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="11">
                <el-form-item label="等级" prop="level">
                  <el-select v-model="basicForm.level" placeholder="请选择等级">
                    <el-option
                      v-for="(item, index) in CateList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="星级" prop="star_level">
                  <el-select
                    v-model="basicForm.star_level"
                    placeholder="请选择星级"
                  >
                    <el-option
                      v-for="(item, index) in CateList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="解锁成就" prop="unlock_achievements">
                  <el-input
                    v-model="basicForm.unlock_achievements"
                    placeholder="请输入解锁成就"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="粉丝人数" prop="fans_number">
                  <el-input
                    v-model="basicForm.fans_number"
                    placeholder="请输入解锁成就"
                  ></el-input>
                </el-form-item>
              </el-col> -->
              </el-form>
              <el-col :span="24" style="text-align: right">
                <el-button @click="dialogMerchantClose">取 消</el-button>
                <el-button type="primary" @click="nextStep()">下一步</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane v-if="form.type !== 1" label="单位信息" name="单位信息">
            <el-row :gutter="20">
              <el-form ref="companyForm" :model="companyForm" :rules="companyRules" label-width="120px"
                class="demo-ruleForm">
                <el-col :span="11">
                  <el-form-item label="单位名称" prop="name">
                    <el-input v-model="companyForm.name" clearable maxlength="20" show-word-limit
                      placeholder="请输入单位名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="统一信用代码" prop="social_unified_credit_code">
                    <el-input v-model="companyForm.social_unified_credit_code" clearable maxlength="18" show-word-limit
                      placeholder="请输入社会统一信用代码" />
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="营业执照所在地" prop="business_license_address">
                    <el-input v-model="companyForm.business_license_address" clearable placeholder="请输入营业执照所在地" />
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="营业期限" prop="business_expiration_time">
                    <el-date-picker v-model="companyForm.business_expiration_time" type="daterange"
                      value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="营业执照" prop="duplicate_of_business_license">
                    <logo-upload :single-file="duplicate_of_business_licenseFile" :show-file-list="false"
                      accept="image/jpeg, image/png" @uploadCallback="duplicate_of_business_licenseCallback" />
                  </el-form-item>
                </el-col>
                <el-col v-if="form.type !== 2" :span="24">
                  <el-form-item label="单位类型" prop="type">
                    <el-radio-group v-model="companyForm.type" size="mini">
                      <el-radio :label="1">有限责任公司</el-radio>
                      <el-radio :label="2">无限公司</el-radio>
                      <el-radio :label="3">两和公司</el-radio>
                      <el-radio :label="4">股份有限公司</el-radio>
                      <el-radio :label="5">股份两和公司</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="单位所在省份" prop="province_id">
                    <el-select v-model="companyForm.province_id" clearable placeholder="请选择省份"
                      @change="unitprovince_idWay">
                      <el-option v-for="(item, index) in unitprovinceList" :key="index" :label="item.name"
                        :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="单位所在城市" prop="city_id">
                    <el-select v-model="companyForm.city_id" clearable placeholder="请选择城市" @change="unitcity_idWay">
                      <el-option v-for="(item, index) in unitcityList" :key="index" :label="item.name"
                        :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="单位所在区/县" prop="county_id">
                    <el-select v-model="companyForm.county_id" clearable placeholder="请选择区/县">
                      <el-option v-for="(item, index) in unitcountyList" :key="index" :label="item.name"
                        :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="单位电话" prop="office_cellphone">
                    <el-input v-model="companyForm.office_cellphone" clearable maxlength="12" show-word-limit
                      placeholder="请输入电话(可以是固话或者手机号)" />
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="单位详细地址" prop="address">
                    <el-input v-model="companyForm.address" clearable placeholder="请输入单位所在详细地址" />
                  </el-form-item>
                </el-col>
              </el-form>
              <el-col :span="24" style="text-align: right">
                <el-button @click="dialogMerchantClose">取 消</el-button>
                <el-button type="primary" @click="Back">上一步</el-button>
                <el-button type="primary" @click="nextStep()">下一步</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane v-if="form.type !== 1" label="法人信息" name="法人信息">
            <el-row :gutter="20">
              <el-form ref="legal_personForm" :model="legal_personForm" :rules="legal_personRules" label-width="110px"
                class="demo-ruleForm">
                <el-col :span="11">
                  <el-form-item label="法人姓名" prop="name">
                    <el-input v-model="legal_personForm.name" clearable maxlength="10" show-word-limit
                      placeholder="请输入法人姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="法人手机号" prop="cellphone">
                    <el-input v-model="legal_personForm.cellphone" clearable maxlength="11" show-word-limit
                      placeholder="请输入法人手机号" />
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="证件类型" prop="certificate_type">
                    <el-radio-group v-model="legal_personForm.certificate_type" size="mini">
                      <el-radio :label="1">身份证</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="身份证(国徽)" prop="id_card_front">
                    <logo-upload :single-file="id_card_frontfile" :show-file-list="false" accept="image/jpeg, image/png"
                      @uploadCallback="id_card_frontCallback" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="身份证(人像)" prop="id_card_reverse">
                    <logo-upload :single-file="id_card_reversefile" :show-file-list="false"
                      accept="image/jpeg, image/png" @uploadCallback="id_card_reverseCallback" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="法人证件号码" prop="certificate_no">
                    <el-input v-model="legal_personForm.certificate_no" clearable maxlength="18" show-word-limit
                      placeholder="请输入法人证件号码" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="证件期限类型" prop="id_card_time_type">
                    <el-radio-group v-model="legal_personForm.id_card_time_type" size="mini">
                      <el-radio :label="1">长期</el-radio>
                      <el-radio :label="2">短期</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="身份证有效期" prop="id_card_time">
                    <el-date-picker v-if="legal_personForm.id_card_time_type == 2"
                      v-model="legal_personForm.id_card_time" type="daterange" value-format="yyyy-MM-dd"
                      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                    <span v-else>长期有效</span>
                  </el-form-item>
                </el-col>
              </el-form>
              <el-col :span="24" style="text-align: right">
                <el-button @click="dialogMerchantClose">取 消</el-button>
                <el-button type="primary" @click="Back">上一步</el-button>
                <el-button type="primary" @click="nextStep()">下一步</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="店铺经营状况" name="店铺经营状况">
            <el-row :gutter="20">
              <el-form ref="profileForm" :model="profileForm" :rules="profileRules" label-width="110px"
                class="demo-ruleForm">
                <el-col :span="22">
                  <el-form-item label="品牌成立时间" prop="brand_establishment_time">
                    <el-date-picker v-model="profileForm.brand_establishment_time" value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime" clearable placeholder="选择开店时间" @change="brand_establishment_timeWay" />
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="品牌定位" prop="positioning">
                    <el-radio-group v-model="profileForm.positioning" size="mini">
                      <el-radio :label="1">专卖店</el-radio>
                      <el-radio :label="2">旗舰店</el-radio>
                      <el-radio :label="3">线上店</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="11">
                  <el-form-item label="受众人群" prop="target_user">
                    <el-input
                      clearable
                      v-model="profileForm.target_user"
                      placeholder="请输入受众人群(例:12-40)"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="爆品ID" prop="explosive_product_id">
                    <el-input
                      clearable
                      v-model="profileForm.explosive_product_id"
                      placeholder="请输入爆品ID"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="单位规模图" prop="images">
                    <logo-upload
                      :single-file="imagesfile"
                      :show-file-list="false"
                      accept="image/jpeg, image/png"
                      @uploadCallback="imagesCallback"
                    />
                  </el-form-item>
                </el-col> -->
                <el-col :span="11">
                  <el-form-item label="入驻承诺书" prop="resident_commitment">
                    <logo-upload :single-file="resident_commitmentfile" :show-file-list="false"
                      accept="image/jpeg, image/png" @uploadCallback="resident_commitmentCallback" />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="品牌授权承诺书" prop="brand_authorization">
                    <logo-upload :single-file="brand_authorizationfile" :show-file-list="false"
                      accept="image/jpeg, image/png" @uploadCallback="brand_authorizationCallback" />
                  </el-form-item>
                </el-col>
              </el-form>
              <el-col :span="24" style="text-align: right">
                <el-button @click="dialogMerchantClose">取 消</el-button>
                <el-button type="primary" @click="Back">上一步</el-button>
                <el-button type="primary" @click="submitFront">提交</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!--    详情-->
    <merchant-details ref="refMerchant" />
  </div>
</template>
<script>
  import {
    getMerchantList,
    addMerchantList,
    getCateList,
    editMerchantList,
    editMerchantStatus,
    delMerchantList,
    merchantDetail
  } from '@/api/merchant/index'
  import {
    getUserList,
    getUserDetail,
    getRegionList
  } from '@/api/user/index'
  import LogoUpload from '@/components/FileUpload'
  import MerchantDetails from './merchantDetails/merchantDetails.vue'
  const tableTheadOption = {
    created_at: {
      label: '创建时间',
      field: 'created_at'
    },
    updated_at: {
      label: '更新时间',
      field: 'updated_at'
    },
    expiration_time: {
      label: '到期时间',
      field: 'expiration_time'
    },
    id: {
      label: 'id',
      field: 'id'
    },
    name: {
      label: '商户名称',
      field: 'name'
    },
    user_cellphone: {
      label: '手机号',
      field: 'user_cellphone'
    },
    user_name: {
      label: '用户名字',
      field: 'user_name'
    }
  }

  const allTableThead = [
    'created_at',
    'updated_at',
    'expiration_time',
    'id',
    'name',
    'user_cellphone',
    'user_name'
  ]
  const defaultTableThead = ['id', 'name', 'user_cellphone', 'user_name']
  export default {
    components: {
      LogoUpload,
      MerchantDetails
    },
    data() {
      return {
        searchDisplay: false,
        // 动态显示表头默认表头
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        loading: false,
        addLoading: false,
        // 搜索参数
        searchForm: {
          page: 1,
          count: 10
        },
        title: '添加商户',
        // 类目列表
        CateList: [],
        // 用户列表
        userList: [],
        // 省份列列表
        provinceList: [],
        // 城市列表
        cityList: [],
        // 区县列表
        countyList: [],
        // 单位使用的省市区
        // 省份列列表
        unitprovinceList: [],
        // 城市列表
        unitcityList: [],
        // 区县列表
        unitcountyList: [],
        // 商户列表
        merchantList: [],
        // 总条数
        total: 0,
        // 添加商户弹框控制器
        dialogMerchant: false,
        // 当前添加信息模块
        activeName: '基本信息',
        // 关联的用户信息
        form: {
          id: '',
          user_id: '',
          type: 1, // 类型(1.个人,2.企业/个体)
          user_cellphone: '', // 类型(1.个人,2.企业/个体)
          user_name: '' // 类型(1.个人,2.企业/个体)
        },
        formRules: {
          user_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value == '') {
                callback(new Error('请选择关联的用户'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }]
        },
        // 基本信息的表单及回显和表单验证
        // 添加商户基本信息参数
        basicForm: {
          name: '', // 名称
          description: '', // 介绍
          start_time: '', // 开店时间
          logo_image: '', // logo
          background_image: '', // 背景图
          level: '', // 等级
          star_level: '', // 星级
          unlock_achievements: '', // 解锁成就
          tag_info: '', // 标签
          fans_number: '', // 粉丝人数
          province_id: '', // 省
          city_id: '', // 市
          county_id: '', // 区
          user_name: '', // 联系人名称
          user_cellphone: '', // 联系人手机号
          mer_cate_id: '', // 商铺类目
          operate_category: ''
        },
        logoFile: {},
        background_imageFile: {},
        basicRules: {
          name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g
              if (!value) {
                callback(new Error('请输入商户名称'))
              } else {
                if (req.test(value)) {
                  callback(new Error('商户名称中不能存在特殊字符'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }],
          type: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value == '') {
                callback(new Error('请选择商户类型'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],

          province_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择省份'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          city_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择城市'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          county_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择区/县'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          user_name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5·]/g
              if (!value) {
                callback(new Error('请输入联系人'))
              } else {
                if (req.test(value)) {
                  callback(new Error('联系人中不能存在特殊字符'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }],
          user_cellphone: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3456789]\d{9}$/
              if (!value) {
                callback(new Error('请输入联系人手机号'))
              } else {
                if (!req.test(value)) {
                  callback(new Error('输入的手机号格式不正确'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }],
          mer_cate_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择店铺类目'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          description: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入商户介绍'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }]
        },
        // 公司信息的表单及回显和表单验证
        // 添加商户公司信息参数
        companyForm: {
          name: '', // 名称
          social_unified_credit_code: '', // 社会统一信用代码
          business_license_address: '', // 营业执照所在地
          business_expiration_time: [], // 营业期限
          type: 1, // 公司类型(1:有限责任公司,2.无限公司,3.两和公司,4.股份有限公司,5.股份两和公司)
          duplicate_of_business_license: '', // 营业执照副本照片
          province_id: '', // 省
          city_id: '', // 市
          county_id: '', // 区
          address: '', // 办公详细地址
          office_cellphone: '' // 办公电话(可以是固话或者手机号)
        },
        // 营业执照图片回显
        duplicate_of_business_licenseFile: {},
        companyRules: {
          name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g
              if (!value) {
                callback(new Error('请输入单位名称'))
              } else {
                if (req.test(value)) {
                  callback(new Error('单位名称中不能存在特殊字符'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }],
          social_unified_credit_code: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^[0-9a-zA-Z]{18}$/
              if (!value) {
                callback(new Error('请输入社会统一信用代码'))
              } else {
                if (!req.test(value)) {
                  callback(new Error('社会统一信用代码格式不正确'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }],
          business_license_address: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入营业执照所在地址'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          business_expiration_time: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择营业执照的期限'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          type: [{
            required: true,
            validator: (rule, value, callback) => {
              if (this.form.type == 2) {
                return callback()
              }
              if (value === '') {
                callback(new Error('请选择单位类型'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          duplicate_of_business_license: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请上传营业执照'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          province_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择单位所在省份'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          city_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择单位所在城市'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          county_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择单位所在区/县'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          address: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入单位所在地址'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          office_cellphone: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3456789]\d{9}$/
              const reg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/
              if (value == '') {
                callback(new Error('请输入单位电话(可以是固话或者手机号)'))
              } else {
                if (req.test(value) || reg.test(value)) {
                  callback()
                } else {
                  callback(new Error('输入的电话格式不正确'))
                }
              }
            },
            trigger: 'change'
          }]
        },
        // 法人信息的表单及回显和表单验证
        // 添加法人信息信息参数
        legal_personForm: {
          name: '', // 法人名称
          cellphone: '', // 手机号
          certificate_type: 1, // 证件类型(1.身份证,2.军官证,3.护照....)
          certificate_no: '', // 证件号码
          id_card_front: '', // 身份证正面照
          id_card_reverse: '', // 身份证反面照
          id_card_time_type: 2, // 身份证期限类型(1.长期,2.时间)
          id_card_time: [] // 身份证期限(例:2000.01.11-2020.01.11 或者 长期)
        },
        id_card_frontfile: {},
        id_card_reversefile: {},
        legal_personRules: {
          name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5·]/g
              if (!value) {
                callback(new Error('请输入法人姓名'))
              } else {
                if (req.test(value)) {
                  callback(new Error('法人姓名中不能存在特殊字符'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }],
          cellphone: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3456789]\d{9}$/
              if (!value) {
                callback(new Error('请输入法人手机号'))
              } else {
                if (!req.test(value)) {
                  callback(new Error('输入的手机号格式不正确'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }],
          certificate_type: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择证件类型'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          certificate_no: [{
            required: true,
            validator: (rule, value, callback) => {
              const req =
                /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
              if (!value) {
                callback(new Error('请输入法人证件号码'))
              } else {
                if (!req.test(value)) {
                  callback(new Error('输入的证件号码格式不正确'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }],
          id_card_front: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!this.legal_personForm.id_card_front) {
                callback(new Error('请上传身份证照片(国徽面)'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          id_card_reverse: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!this.legal_personForm.id_card_reverse) {
                callback(new Error('请上传身份证照片(人像面)'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          id_card_time_type: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择证件期限'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          id_card_time: [{
            required: true,
            validator: (rule, value, callback) => {
              if (this.id_card_time_type == 2) {
                if (!value) {
                  callback(new Error('请选择证件期限'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            },
            trigger: 'change'
          }]
        },
        // 商户概况的表单及回显和表单验证
        // 添加商户概况信息参数
        profileForm: {
          brand_establishment_time: '', // 品牌成立时间
          positioning: '', // 品牌定位(1.专卖店,2.旗舰店,3.线上店....)
          target_user: '', // 受众人群 (例:12-40) 单位/岁
          explosive_product_id: '', // 爆品ID
          images: '', // 工厂及仓库规模图
          resident_commitment: '', // 入驻承诺书
          brand_authorization: '' // 品牌授权承诺书
        },
        imagesfile: {},
        resident_commitmentfile: {},
        brand_authorizationfile: {},
        profileRules: {},
        // 收款信息的表单及回显和表单验证
        // 添加收款信息信息参数
        collectionForm: {
          type: 1, // 类型(1.银行卡,2.支付宝,3.微信,4.公账)
          bank_name: '', // 银行名称
          bank_card_number: '', // 开户账号
          bank_branch: '', // 支行名称
          bank_user_name: '', // 开户名称
          reserve_cellphone: '' // 开户手机号
        },
        collectionRules: {
          type: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择收款账户类型'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          bank_name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^\u4e00-\u9fa5]/g
              if (req.test(value)) {
                callback(new Error('请输入中文银行名称'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          bank_card_number: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^[1-9]\d{9,29}$/
              if (value == '') {
                callback(new Error('请输入对应的银行账户'))
              } else {
                if (!req.test(value)) {
                  callback(new Error('银行账户格式不正确'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }],
          bank_branch: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^\u4e00-\u9fa5]/g
              if (req.test(value)) {
                callback(new Error('请输入中文开户行名称'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
          bank_user_name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5·]/g
              if (!value) {
                callback(new Error('请输入开户者名字'))
              } else {
                if (req.test(value)) {
                  callback(new Error('开户者名字中不能存在特殊字符'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }],
          reserve_cellphone: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3456789]\d{9}$/
              if (!value) {
                callback(new Error('请输入银行预留手机号'))
              } else {
                if (!req.test(value)) {
                  callback(new Error('输入的手机号格式不正确'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }]
        }
      }
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        )
        this.tableKey = this.tableKey + 1
      }
    },
    created() {
      this.getDataList()
      this.getListWay()
    },
    methods: {
      handleChange() {},
      getcitylist() {
        if (localStorage.getItem('region')) {
          this.citys = JSON.parse(localStorage.getItem('region'))
        } else {
          cityList().then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              return this.$messages.error(res.msg)
            }
            this.citys = res.data
          })
        }
      },
      remoteMethod(query) {
        getUserList({
          search_type: 3,
          search_name: query
        }).then((res) => {
          this.userList = res.data.list
        })
      },
      getDataList() {
        getCateList().then((res) => {
          this.CateList = res.data.list
        })
        getUserList().then((res) => {
          this.userList = res.data.list
        })
        if (localStorage.getItem('region')) {
          let citys = JSON.parse(localStorage.getItem('region'))
          this.provinceList = citys
          this.unitprovinceList = citys
          this.cityList = this.provinceList[0].children
          this.unitcityList = this.unitprovinceList[0].children
          this.countyList = this.cityList[0].children
          this.unitcountyList = this.unitcityList[0].children
        } else {
          getRegionList().then((res) => {
            this.provinceList = res.data
            this.unitprovinceList = res.data
            this.cityList = this.provinceList[0].children
            this.unitcityList = this.unitprovinceList[0].children
            this.countyList = this.cityList[0].children
            this.unitcountyList = this.unitcityList[0].children
          })
        }
      },
      getListWay() {
        this.loading = true
        getMerchantList(this.searchForm)
          .then((res) => {
            this.loading = false
            this.merchantList = res.data.list
            this.total = res.data.total
          })
          .catch(() => {
            this.loading = false
          })
      },
      getQuery() {
        this.searchForm.page = 1
        this.getListWay()
      },
      // 重置搜索内容
      resettingWay() {
        this.searchForm = {
          page: 1,
          count: 10
        }
        this.getListWay()
      },
      // 打开添加商户弹框
      addmerchantWay() {
        this.title = '添加商户'
        this.dialogMerchant = true
      },
      // 选择省份之后执行
      province_idWay(val) {
        this.basicForm.city_id = ''
        this.basicForm.county_id = ''
        this.cityList = []
        this.countyList = []
        this.provinceList.forEach((res) => {
          if (val == res.id) {
            this.cityList = res.children
            this.countyList = this.cityList[0].children
          }
        })
      },
      // 单位使用的省份
      unitprovince_idWay(val) {
        this.companyForm.city_id = ''
        this.companyForm.county_id = ''
        this.unitcityList = []
        this.unitcountyList = []
        this.unitprovinceList.forEach((res) => {
          if (val == res.id) {
            this.unitcityList = res.children
            this.unitcountyList = this.unitcityList[0].children
          }
        })
      },
      // 选择城市之后执行
      city_idWay(val) {
        this.basicForm.county_id = ''
        this.countyList = []
        this.cityList.forEach((res) => {
          if (val == res.id) {
            this.countyList = res.children
          }
        })
      },
      unitcity_idWay(val) {
        this.companyForm.county_id = ''
        this.unitcountyList = []
        this.unitcityList.forEach((res) => {
          if (val == res.id) {
            this.unitcountyList = res.children
          }
        })
      },
      // 关联用户时获取用户信息并赋值
      userIdWay(val) {
        this.addLoading = true
        getUserDetail({
            id: val
          })
          .then((res) => {
            this.addLoading = false
            this.form.user_cellphone = res.data.mobile
            this.form.user_name = res.data.nickname
          })
          .catch(() => {
            this.form.user_id = ''
            this.addLoading = false
            this.$messages.error('请重新选择')
          })
      },
      // 选择商户类型的时候执行
      formtypeWay(val) {
        if (val === 2) {
          this.companyForm.type = ''
        }
      },
      // 点击上一步执行
      Back() {
        if (this.activeName == '基本信息') {} else if (this.activeName == '单位信息') {
          this.activeName = '基本信息'
        } else if (this.activeName == '法人信息') {
          this.activeName = '单位信息'
        } else if (this.activeName == '店铺经营状况') {
          if (this.form.type !== 1) {
            this.activeName = '单位信息'
          } else {
            this.activeName = '基本信息'
          }
        }
      },
      // 点击下一步执行
      nextStep() {
        if (this.activeName == '基本信息') {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.$refs.basicForm.validate((valid) => {
                if (valid) {
                  if (this.form.type !== 1) {
                    this.activeName = '单位信息'
                  } else {
                    this.activeName = '店铺经营状况'
                  }
                } else {
                  this.$messages.warning('基本信息中有必填项未填')
                  return false
                }
              })
            } else {
              this.$messages.warning('请选择并关联用户信息')
              bool = false
              return false
            }
          })
        } else if (this.activeName == '单位信息') {
          this.$refs.companyForm.validate((valid) => {
            if (valid) {
              this.activeName = '法人信息'
            } else {
              this.$messages.warning('单位信息中有必填项未填')
              return false
            }
          })
        } else if (this.activeName == '法人信息') {
          this.$refs.legal_personForm.validate((valid) => {
            if (valid) {
              this.activeName = '店铺经营状况'
            } else {
              this.$messages.warning('法人信息中有必填项未填')
              return false
            }
          })
        }
        // else if (this.activeName == '店铺经营状况') {
        //   this.$refs.profileForm.validate((valid) => {
        //     if (valid) {
        //       this.activeName = '收款信息'
        //     } else {
        //       this.$messages.warning('店铺经营状况中有必填项未填')
        //       return false
        //     }
        //   })
        // }
      },
      submitFront() {
        var bool = true
        if (!bool) {
          return false
        }
        this.$refs.form.validate((valid) => {
          if (valid) {
            return true
          } else {
            this.activeName == '基本信息'
            this.$messages.warning('请选择并关联用户信息')
            bool = false
            return false
          }
        })
        if (!bool) {
          return false
        }
        this.$refs.basicForm.validate((valid) => {
          if (valid) {
            return true
          } else {
            this.activeName = '基本信息'
            this.$messages.warning('基本信息中有必填项未填')
            bool = false
            return false
          }
        })
        if (!bool) {
          return false
        }
        if (this.form.type !== 1) {
          this.$refs.companyForm.validate((valid) => {
            if (valid) {
              return true
            } else {
              this.activeName = '单位信息'
              this.$messages.warning('单位信息中有必填项未填')
              bool = false
              return false
            }
          })
          if (!bool) {
            return false
          }
          this.$refs.legal_personForm.validate((valid) => {
            if (valid) {
              return true
            } else {
              this.activeName == '法人信息'
              this.$messages.warning('法人信息中有必填项未填')
              bool = false
              return false
            }
          })
          if (!bool) {
            return false
          }
        }
        this.$refs.profileForm.validate((valid) => {
          if (valid) {
            return true
          } else {
            this.activeName == '店铺经营状况'
            this.$messages.warning('店铺经营状况中有必填项未填')
            bool = false
            return false
          }
        })
        if (!bool) {
          return false
        }
        let obj = {}
        const _this = this
        console.log(_this.form.mer_id)
        if (_this.form.mer_id) {
          obj = {
            basic: {
              ..._this.basicForm,
              mer_id: _this.form.mer_id,
              user_id: _this.form.user_id,
              type: _this.form.type,
            },
            company: {
              ..._this.companyForm
            },
            legal_person: {
              ..._this.legal_personForm
            },
            profile: {
              ..._this.profileForm
            }
          }
          if (Array.isArray(obj.company.business_expiration_time)) {
            if (obj.company.business_expiration_time.length !== 0) {
              obj.company.business_expiration_time =
                obj.company.business_expiration_time.join(',')
            } else {
              obj.company.business_expiration_time = ''
            }
          }
          if (obj.legal_person.id_card_time_type == 1) {
            obj.legal_person.id_card_time = '长期'
          }
          if (Array.isArray(obj.legal_person.id_card_time)) {
            if (obj.legal_person.id_card_time.length !== 0) {
              obj.legal_person.id_card_time =
                obj.legal_person.id_card_time.join(',')
            } else {
              obj.legal_person.id_card_time = ''
            }
          }
          if (Array.isArray(obj.profile.brand_establishment_time)) {
            if (obj.profile.brand_establishment_time.length !== 0) {
              obj.profile.brand_establishment_time =
                obj.profile.brand_establishment_time.join(',')
            } else {
              obj.profile.brand_establishment_time = ''
            }
          }
        } else {
          obj = {
            // mer_id: _this.form.mer_id,
            user_id: _this.form.user_id,
            type: _this.form.type,
            data: {
              basic: {
                ..._this.basicForm
              },
              company: {
                ..._this.companyForm
              },
              legal_person: {
                ..._this.legal_personForm
              },
              profile: {
                ..._this.profileForm
              }
            }
          }
          if (Array.isArray(obj.data.company.business_expiration_time)) {
            if (obj.data.company.business_expiration_time.length !== 0) {
              obj.data.company.business_expiration_time =
                obj.data.company.business_expiration_time.join(',')
            } else {
              obj.data.company.business_expiration_time = ''
            }
          }
          if (obj.data.legal_person.id_card_time_type == 1) {
            obj.data.legal_person.id_card_time = '长期'
          }
          if (Array.isArray(obj.data.legal_person.id_card_time)) {
            if (obj.data.legal_person.id_card_time.length !== 0) {
              obj.data.legal_person.id_card_time =
                obj.data.legal_person.id_card_time.join(',')
            } else {
              obj.data.legal_person.id_card_time = ''
            }
          }
          if (Array.isArray(obj.data.profile.brand_establishment_time)) {
            if (obj.data.profile.brand_establishment_time.length !== 0) {
              obj.data.profile.brand_establishment_time =
                obj.data.profile.brand_establishment_time.join(',')
            } else {
              obj.data.profile.brand_establishment_time = ''
            }
          }
        }
        _this.submitForm(obj)
      },
      submitForm(obj) {
        var _this = this
        _this.addLoading = true
        console.log(obj,"666")
        if (!obj.data.basic.mer_id) {
          addMerchantList(obj)
            .then((res) => {
              _this.addLoading = false
              _this.dialogMerchant = false
              _this.dialogMerchantClose()
              _this.getListWay()
              _this.$messages.success('添加成功')
            })
            .catch(() => {
              this.addLoading = false
            })
        } else {
          obj.apply_type = 2
          editMerchantList(obj)
            .then((res) => {
              if (res.code == 200) {
                _this.$messages.success('修改成功')
                _this.addLoading = false
                _this.dialogMerchant = false
                _this.dialogMerchantClose()
                _this.getListWay()
              } else {
                _this.$messages.error(res)
              }
            })
            .catch(() => {
              this.loading = false
            })
        }
      },
      // 添加修改商户弹框关闭
      dialogMerchantClose() {
        this.basicForm = {
          name: '', // 名称
          description: '', // 介绍
          logo_image: '', // logo
          background_image: '', // 背景图
          level: '', // 等级
          star_level: '', // 星级
          unlock_achievements: '', // 解锁成就
          tag_info: '', // 标签
          fans_number: '', // 粉丝人数
          province_id: '', // 省
          city_id: '', // 市
          county_id: '', // 区
          user_name: '', // 联系人名称
          user_cellphone: '', // 联系人手机号
          mer_cate_id: '', // 商铺类目
          operate_category: ''
        }
        this.logoFile = {}
        this.background_imageFile = {}
        this.companyForm = {
          name: '', // 名称
          social_unified_credit_code: '', // 社会统一信用代码
          business_license_address: '', // 营业执照所在地
          business_expiration_time: [], // 营业期限
          type: 1, // 公司类型(1:有限责任公司,2.无限公司,3.两和公司,4.股份有限公司,5.股份两和公司)
          duplicate_of_business_license: '', // 营业执照副本照片
          province_id: '', // 省
          city_id: '', // 市
          county_id: '', // 区
          address: '', // 办公详细地址
          office_cellphone: '' // 办公电话(可以是固话或者手机号)
        }
        // 营业执照图片回显
        this.duplicate_of_business_licenseFile = {}
        this.legal_personForm = {
          name: '', // 法人名称
          cellphone: '', // 手机号
          certificate_type: 1, // 证件类型(1.身份证,2.军官证,3.护照....)
          certificate_no: '', // 证件号码
          id_card_front: '', // 身份证正面照
          id_card_reverse: '', // 身份证反面照
          id_card_time_type: 2, // 身份证期限类型(1.长期,2.时间)
          id_card_time: [] // 身份证期限(例:2000.01.11-2020.01.11 或者 长期)
        }
        this.id_card_frontfile = {}
        this.id_card_reversefile = {}
        this.profileForm = {
          brand_establishment_time: '', // 品牌成立时间
          positioning: '', // 品牌定位(1.专卖店,2.旗舰店,3.线上店....)
          target_user: '', // 受众人群 (例:12-40) 单位/岁
          explosive_product_id: '', // 爆品ID
          images: '', // 工厂及仓库规模图
          resident_commitment: '', // 入驻承诺书
          brand_authorization: '' // 品牌授权承诺书
        }
        this.imagesfile = {}
        this.resident_commitmentfile = {}
        this.brand_authorizationfile = {}
        this.profileRules = {}
        this.collectionForm = {
          type: 1, // 类型(1.银行卡,2.支付宝,3.微信,4.公账)
          bank_name: '', // 银行名称
          bank_card_number: '', // 开户账号
          bank_branch: '', // 支行名称
          bank_user_name: '', // 开户名称
          reserve_cellphone: '' // 开户手机号
        }
        this.form = {
          user_id: '',
          type: 1, // 类型(1.个人,2.企业/个体)
          user_cellphone: '', // 类型(1.个人,2.企业/个体)
          user_name: '' // 类型(1.个人,2.企业/个体)
        }
        this.activeName = '基本信息'
        this.$refs.basicForm.resetFields()
        this.$refs.profileForm.resetFields()
        if (this.form.type !== 1) {
          this.$refs.companyForm.resetFields()
          this.$refs.legal_personForm.resetFields()
        }
        this.$refs.form.resetFields()
        this.dialogMerchant = false
      },
      delGradeWay(row) {
        this.loading = true
        delMerchantList({
            id: row.id
          })
          .then((res) => {
            if (res.code == 200) {
              this.$messages.success('删除成功')
              this.getListWay()
            } else {
              this.$messages.error(res.msg)
            }
          })
          .catch(() => {
            this.loading = false
          })
      },
      putGrade(val) {
        this.addmerchantWay()
        this.title = '修改商户信息'
        this.addLoading = true
        merchantDetail({
            id: val.id
          })
          .then((res) => {
            const obj = res.data
            this.cityList.forEach((res) => {
              if (obj.basic.city_id == res.id) {
                this.countyList = res.children
              }
            })
            this.provinceList.forEach((res) => {
              if (obj.basic.province_id == res.id) {
                this.cityList = res.children
                this.countyList = this.cityList[0].children
              }
            })
            if (obj.company && obj.company.city_id) {
              this.unitcityList.forEach((res) => {
                if (obj.company.city_id == res.id) {
                  this.unitcountyList = res.children
                }
              })
            }
            if (obj.company && obj.company.province_id) {
              this.unitprovinceList.forEach((res) => {
                if (obj.company.province_id == res.id) {
                  this.unitcityList = res.children
                  this.unitcountyList = this.unitcityList[0].children
                }
              })
            }
            this.$nextTick(() => {
              this.form.mer_id = obj.basic.mer_id
              this.form.user_id = obj.basic.user_id
              this.userIdWay(this.form.user_id)
              this.form.type = obj.basic.type
              this.basicForm.name = obj.basic.name
              this.basicForm.description = obj.basic.description
              this.basicForm.start_time = obj.basic.start_time
              this.basicForm.logo_image = obj.basic.logo
              this.logoFile = {
                url: obj.basic.logo
              }
              this.basicForm.background_image =
                obj.basic.background_image
              this.background_imageFile = {
                url: obj.basic.background_image
              }
              this.basicForm.level = obj.basic.level
              this.basicForm.star_level = obj.basic.star_level
              this.basicForm.unlock_achievements =
                obj.basic.unlock_achievements
              this.basicForm.tag_info = obj.basic.tag_info
              this.basicForm.fans_number = obj.basic.fans_number
              this.basicForm.province_id = obj.basic.province_id
              this.basicForm.city_id = obj.basic.city_id
              this.basicForm.county_id = obj.basic.county_id
              this.basicForm.user_name = obj.basic.user_name
              this.basicForm.user_cellphone = obj.basic.user_cellphone
              this.basicForm.mer_cate_id = Number(
                obj.basic.mer_cate_id
              )
              this.basicForm.operate_category = Number(
                obj.basic.operate_category
              )
              if (obj.basic.type != 1) {
                this.companyForm.name = obj.company.name
                this.companyForm.social_unified_credit_code =
                  obj.company.social_unified_credit_code
                this.companyForm.business_license_address =
                  obj.company.business_license_address
                this.companyForm.duplicate_of_business_license =
                  obj.company.duplicate_of_business_license
                this.duplicate_of_business_licenseFile = {
                  url: obj.company.duplicate_of_business_license
                }
                this.companyForm.address = obj.company.address
                this.companyForm.office_cellphone =
                  obj.company.office_cellphone
                this.companyForm.province_id = obj.company.province_id
                this.companyForm.city_id = obj.company.city_id
                this.companyForm.county_id = obj.company.county_id
                this.companyForm.business_expiration_time =
                  obj.company.business_expiration_time.split(',')
                this.legal_personForm.name = obj.legal_person.name
                this.legal_personForm.cellphone =
                  obj.legal_person.cellphone
                this.legal_personForm.certificate_type = Number(
                  obj.legal_person.certificate_type
                )
                this.legal_personForm.certificate_no =
                  obj.legal_person.certificate_no
                this.legal_personForm.id_card_time_type = Number(
                  obj.legal_person.id_card_time_type
                )
                this.legal_personForm.id_card_time =
                  obj.legal_person.id_card_time.split(',')
                this.legal_personForm.id_card_front =
                  obj.legal_person.id_card_front
                this.legal_personForm.id_card_reverse =
                  obj.legal_person.id_card_reverse
                this.id_card_frontfile = {
                  url: obj.legal_person.id_card_front
                }
                this.id_card_reversefile = {
                  url: obj.legal_person.id_card_reverse
                }
              }
              this.profileForm.brand_establishment_time =
                obj.profile.brand_establishment_time
              this.profileForm.positioning = obj.profile.positioning
              this.profileForm.target_user = obj.profile.target_user
              this.profileForm.explosive_product_id =
                obj.profile.explosive_product_id
              this.profileForm.images = obj.profile.images
              this.profileForm.resident_commitment =
                obj.profile.resident_commitment
              this.profileForm.brand_authorization =
                obj.profile.brand_authorization

              this.imagesfile = {
                url: obj.profile.images
              }
              this.brand_authorizationfile = {
                url: obj.profile.resident_commitment
              }
              this.resident_commitmentfile = {
                url: obj.profile.brand_authorization
              }
              this.addLoading = false
            })
          })
          .catch((err) => {
            this.addLoading = false
            this.dialogMerchant = false
            this.$messages.error(err.msg)
          })
      },
      switchShowWay(val) {
        this.loading = true
        var obj = {
          status: val.status,
          id: val.id
        }
        editMerchantStatus(obj)
          .then((res) => {
            if (res.code == 200) {
              this.$messages.success('修改成功')
              this.getListWay()
            } else {
              this.$messages.error(res)
              this.getListWay()
            }
          })
          .catch(() => {
            this.loading = false
            this.getListWay()
          })
      },
      // 选择添加信息模块调用
      handleMerchantClick() {},
      // 营业执照图片调用
      licenseCallback() {},
      handleSizeChange(val) {
        this.searchForm.count = val
        this.getListWay()
      },
      handleCurrentChange(val) {
        this.searchForm.page = val
        this.getListWay()
      },
      // 基本信息图片回调
      logoCallback(file) {
        this.logoFile = file
        this.basicForm.logo = file.url
      },
      background_imageCallback(file) {
        this.background_imageFile = file
        this.basicForm.background_image = file.url
      },
      // 单位营业执照图片回调
      duplicate_of_business_licenseCallback(file) {
        this.duplicate_of_business_licenseFile = file
        this.companyForm.duplicate_of_business_license = file.url
      },
      // 法人身份证(国徽面)图片回调
      id_card_frontCallback(file) {
        this.id_card_frontfile = file
        this.legal_personForm.id_card_front = file.url
      },
      // 法人身份证(人像面)图片回调
      id_card_reverseCallback(file) {
        this.id_card_reversefile = file
        this.legal_personForm.id_card_reverse = file.url
      },
      // 单位规模图片回调
      imagesCallback(file) {
        this.imagesfile = file
        this.profileForm.images = file.url
      },
      // 入驻承诺书图片回调
      resident_commitmentCallback(file) {
        this.resident_commitmentfile = file
        this.profileForm.resident_commitment = file.url
      },
      // 品牌授权承诺书图片回调
      brand_authorizationCallback(file) {
        this.brand_authorizationfile = file
        this.profileForm.brand_authorization = file.url
      },
      brand_establishment_timeWay(vla) {
        console.log(vla)
      },
      //  商户详情
      doInfo(row) {
        this.$refs.refMerchant.open(row)
      }
    }
  }
</script>

<style scoped>
  .title {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 2px solid #ededed;
    margin: 0px 0 20px;
  }
</style>
